// 获取 ID
const id =
  parseInt(new URLSearchParams(window.location.search).get("teacherId")) || 0;

document.querySelector("h1").innerHTML = `修改老师【${id}】的信息`;

// 获取表单
const form = document.querySelector("form");

// 获取所有的 input
const inputs = document.querySelectorAll(`input[type="text"]`);

// 加载完成后就加载老师的信息
(function getTeacher() {
  // 异步请求
  setTimeout(() => {
    fetch("http://localhost:8000/teachers/" + id, {
      // 请求方法
      method: "get",
      // 请求头
      headers: {
        "Content-Type": "Authorization",
      },
    })
      .then((response) => {
        // 如果状态码 200 则请求成功
        if (response.status === 200) {
          // 解析响应体为 JSON
          return response.json();
        }
        // 否则 抛出异常及当前状态码
        throw new Error(`HTTP error! Status: ${response.status}`);
      })
      .then((data) => {
        if (data.code === 200) {
          // 把获取的信息放到表单里
          inputs[0].value = data.data.teacherName;
          inputs[1].value = data.data.teacherAge;
          inputs[2].value = data.data.teacherSex;
          inputs[3].value = data.data.phone;
          inputs[4].value = data.data.className;
        } else {
          // 提示信息
          console.log(data.message);
        }
      })
      .catch((error) => {
        console.error(error);
      });
  }, 100);
})();

// 提交数据
form.addEventListener("submit", (e) => {
  // 阻止默认行为
  e.preventDefault();

  // 判断是否都有内容
  if (
    inputs[0].value.trim() !== "" &&
    inputs[1].value.trim() !== "" &&
    inputs[2].value.trim() !== "" &&
    inputs[3].value.trim() !== "" &&
    inputs[4].value.trim() !== ""
  ) {
    // 创建一个老师对象
    const teacher = {
      teacherName: inputs[0].value.trim(),
      teacherAge: Number(inputs[1].value.trim()),
      teacherSex: inputs[2].value.trim(),
      phone: inputs[3].value.trim(),
      className: inputs[4].value.trim(),
    };

    // 异步请求
    setTimeout(() => {
      fetch("http://localhost:8000/teachers/" + id, {
        // 请求方法
        method: "put",
        // 请求头
        headers: {
          "Content-Type": "Authorization",
          "Content-Type": "application/json",
        },
        // 请求的 Json 对象
        body: JSON.stringify(teacher),
      })
        .then((response) => {
          // 如果状态码 200 则请求成功
          if (response.status === 200) {
            // 解析响应体为 JSON
            return response.json();
          }
          // 否则 抛出异常及当前状态码
          throw new Error(`HTTP error! Status: ${response.status}`);
        })
        .then((data) => {
          if (data.code === 200) {
            // 提示修改成功
            // alert("修改成功！");

            // 清空表单
            // form.reset();

            // 跳转到首页
            location.href = "./index.html";
          } else {
            // 提示信息
            console.log(data.message);
          }
        })
        .catch((error) => {
          console.error(error);
        });
    }, 100);
  } else {
    // 提示输入内容
    alert("请输入内容~");
  }
});
